import { Button, ButtonProps, Image } from "@tarojs/components"
import Global from "../lib/global"
import "./borderless-button.scss"

interface BorderlessButtonProps extends ButtonProps {
    children?: JSX.Element | string | any,
    backgroundImage?: string
}

const BorderlessButton = (props: BorderlessButtonProps) => {
  
    let backgroundImageEl
    if (props.backgroundImage) {
        backgroundImageEl = <Image className="borderless-button-bg" src={Global.loadImage(props.backgroundImage)}></Image>
    }

    return (
        <Button {...props} className={["borderless-button", props.className].join(" ")} >
            { backgroundImageEl }
            { props.children }
        </Button>
    )
}

export default BorderlessButton